<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="./js/jquery.min.js"></script>
</head>
<style>
    * {
      padding: 0;
      margin: 0;
    }
    ul,
    ol {
      list-style: none;
    }
    #box{
        display: flex;
        width: 800px;
        height: 600px;
        margin: 100px auto;
        border: 1px solid #000;
    }
    #box li{
        position: relative;
        flex:1;
        perspective: 500000px;
        transform-style: preserve-3d;
        transition: all 1s ease;

    }
    #box li div {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: 800px 600px;
    }
    
    #btn {
        display: block;
        width: 100px;
        height: 50px;
        margin: 20px auto;
    }
</style>
<body>
    <ul id="box">
    </ul>
    <input type="button" id="btn" value="下一张">
</body>
<script>
  const num = 200;
  const $box = $("#box");
  const width = $box.width();
  const height = $box.height();
  const $btn = $("#btn");

  let x = 90;
  let lock = false;
  let lis = [];
  for (let i = 0; i < num; i++) {
    lis.push(`<li class="list">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      </li>`);
  }
  $box.append($(lis.join(''))).children().each(function (i) {
      $(this).children('div').css('background-position', `-${ width / num * i}px 0`).each(function (i) {
        $(this).css({
          'background-image': `url(./img/${i+1}.png)`,
          'transform': `rotateX(${i*90}deg) translateZ(${height / 2}px)`
        })
      })
    })
  $btn.click(function(){
      if(lock){
          return;
      }
      lock = !lock;
      setTimeout(function(){
          lock = !lock;
      }, 1300);
      $("#box li").each(function(i){
          $(this).css({
              'transform': `rotateX(-${x}deg)`,
              'transition-delay': `${0.001*i}s`
          })
      });
      x += 90;
  });
</script>
</html>